<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2023-06-04 23:44:31
 * @LastEditTime: 2023-06-06 23:02:39
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 择取字段
 * @FilePath: \vue3-element-plus-web\src\views\SysManage\GenderCode\components\Drawer\settingsComponents\FieldSelectSet.vue
 * Copyright 版权声明
-->
<template>
  <div class="mod_inner">
    <el-form
      :rules="rules"
      ref="dataForm"
      :model="genderCodeModuleInfo"
      label-width="200px"
      label-position="top"
    >
      <el-form-item v-for="(item, index) in genderCodeTableRowSet" :key="index" :label="`${item.comment}：`">
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="(items, indexs) in item.columns"
            :key="indexs"
            :label="`${items.TABLE_NAME}-${items.COLUMN_NAME}`"
            @change="(val) => handleChangeCheckList(val, items)"
          >
            {{ items.COLUMN_COMMENT || '' }}
            [ {{ items.COLUMN_NAME }} ]
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'BaseSet',
  computed: {
    ...mapGetters([
      // 选择的表集合
      'genderCodeTableRowSet',
      // 模块配置信息
      'genderCodeModuleInfo'
    ])
  },
  components: {
  },
  data() {
    return {
      checkList: [],
      rules: {
      }
    }
  },
  watch: {
    // 选择的表集合
    genderCodeTableRowSet: {
      handler: function(val, oldVal) {
      },
      deep: true
    },
    // 模块配置信息
    genderCodeModuleInfo: {
      handler: function(val, oldVal) {
      },
      deep: true
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    // 选中列表
    handleChangeCheckList(val, row) {
      const moduleInfoColumn = this.genderCodeModuleInfo.column
      // 如果选中
      if (val === true) {
        // 遍历已配置的列表
        const checkList = []
        for (const i in moduleInfoColumn) {
          const item = moduleInfoColumn[i]
          checkList.push(item.prop)
        }
        // 如果不存在
        if (checkList.indexOf(row.COLUMN_NAME) === -1) {
          moduleInfoColumn.push({
            tableName: row.TABLE_NAME, // TODO: 数据表名，用于做多表同名字段判断处理
            show: true, // 在列表中是否展示
            label: row.COLUMN_COMMENT || '', // 列标题
            prop: row.COLUMN_NAME, // 列标题的内容属性名称
            width: 120, // 对应列的宽度
            minWidth: 120, // 对应列的最小宽度，与 width 的区别是 width 是固定的，minWidth 会把剩余宽度按比例分配给设置了 minWidth 的列
            align: 'center', // 对齐方式
            showOverflowTooltip: true, // 当内容过长被隐藏时显示 tooltip
            search: false, // 是否在搜索区作为查询条件展示， 默认值： false
            searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime、date、cascader
            searchDefaultValue: '', // e搜索项初始化值
            searchPlaceholder: `请输入${row.COLUMN_COMMENT || ''}`, // 搜索项辅助文字
            searchTip: `${row.COLUMN_COMMENT || ''}提示语`, // 辅助提示语
            searchTipPlacement: 'left', // 提示语的方向
            dictData: [] // searchType / formType 如果为 checked 、 radio 、 select 等需要枚举的配置此值
          })
        }
      } else {
        // 如果未选中且已在选中列表中，进行剔除
        for (const i in moduleInfoColumn) {
          const item = moduleInfoColumn[i]
          if (item.prop === row.COLUMN_NAME) {
            moduleInfoColumn.splice(i, 1)
          }
        }
      }
      // 设置 模块配置信息 择取的字段
      this.$store.dispatch('SetModuleInfoColumn', moduleInfoColumn)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
<style rel="stylesheet/scss" lang='scss' scoped>
.mod_inner{
}
</style>
